<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .rate {
            display: inline-block;
        }

        .rate .box {
            display: flex;
            flex-flow: row-reverse;
        }

        .rate input[type="radio"] {
            display: none;
        }

        .rate label {
            display: inline-block;
            width: 30px;
            height: 30px;
            /* background-color: brown; */
            background-image: url("./star-close.png");
            background-repeat: no-repeat;
            background-size: 90% 90%;
        }

        /* input[type="radio"]:checked+label{ */
        .rate input[type="radio"]:checked~label{
            /* background-color: blue; */
            background-image: url("./star-open.png");
        }
        .change:hover~label {
            /* background-color: blue; */
            background-image: url("./star-open.png");
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="rate">
            <div class="box">
                <input type="radio" value="5" class="change" disabled name="rate" id="rate1" v-model="source">
                <label for="rate1"></label>
                <input type="radio" value="4" class="change" disabled name="rate" id="rate2" v-model="source">
                <label for="rate2"></label>
                <input type="radio" value="3" class="change" disabled name="rate" id="rate3" v-model="source">
                <label for="rate3"></label>
                <input type="radio" value="2" class="change" disabled name="rate" id="rate4" v-model="source">
                <label for="rate4"></label>
                <input type="radio" value="1" class="change" disabled name="rate" id="rate5" v-model="source">
                <label for="rate5"></label>
            </div>
            <span>{{ source }}</span>
        </div>
    </div>
    <hr>

    <style>
        .change-box input[type="checkbox"]{
            display: none;
        }
        .change-box label{
            display: inline-block;
            width: 20px;
            height: 20px;
            /* border: 1px solid black; */
            cursor: pointer;
            background-image: url("./checkbox.png");
            background-repeat: no-repeat;
            background-size: 100% auto;
            background-position-y: -25px;
        }
        .change-box input[type="checkbox"]:checked+label{
            background-position-y: 0px;
        }
    </style>
    <div class="change-box">
        <input type="checkbox" value="5" id="aa">
        <label for="aa"></label>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            source: 3
        }
    })

</script>

</html>